<!-- 我是卡券 -->
<template lang="html">
  <div class="cardBox">
    <h1>暂未开放</h1>
    <!-- <el-row>
      <el-col :span="2" class="text-right">
        <span>产品名：</span>
      </el-col>
      <el-col :span="4" class="text-left">
        <el-input size="small" placeholder="请输入内容"></el-input>
      </el-col>
      <el-col :span="2" class="text-right">
        <span>售卖渠道：</span>
      </el-col>
      <el-col :span="4" class="text-left">
        <el-select v-model="value" size="small" placeholder="请选择">
           <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
           </el-option>
        </el-select>
      </el-col>
      <el-col :span="2" class="text-right">
        <span>商家名：</span>
      </el-col>
      <el-col :span="4" class="text-left">
        <el-input size="small" placeholder="请输入内容"></el-input>
      </el-col>
    </el-row>
    <el-row style="margin-top:10px;">
      <el-col :span="2" class="text-right">
        <span>商家名：</span>
      </el-col>
      <el-col :span="2" class="text-left" style="padding-top:4px;">
        <el-checkbox v-model="checked">备选项</el-checkbox>
      </el-col>
    </el-row>
    <el-row style="margin-top:10px;">
      <el-col :span="2" :offset="2" class="text-left">
         <el-button type="success"   size="small">筛选</el-button>
      </el-col>
      <el-col :span="2" :offset="16" class="text-left">
         <el-button type="success"   size="small">＃同步商品</el-button>
      </el-col>
    </el-row>
    <el-row class="box">
       <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
         <el-tab-pane label="出售中" name="first">
          <ul class="listBox">
              <li class="first">
                <span class="name">产品名</span>
                <span class="num">库存</span>
                <span class="allNum green">总销量</span>
                <span class="shangjia">商家名</span>
                <span class="policy">退款政策</span>
                <span class="buy">提前购买</span>
                <span class="update green">更新时间</span>
                <span class="operation">操作</span>
              </li>
              <li>
                <span class="name">
                  <p>【9.9元，红酒小镇水上乐园 】耍水的超棒打开方式！来美心水上乐园一次告别酷暑夏天！</p>
                  <span class="price">¥22.9</span>
                </span>
                <span class="num text-left">85</span>
                <span class="allNum text-left green">45</span>
                <span class="shangjia text-left">碧海云天</span>
                <span class="policy text-left">不退换</span>
                <span class="buy text-left">是</span>
                <span class="update">
                  <p>2017-05-19</p>
                  <p>18:00:45</p>
                </span>
                <span class="operation green">
                  <p>自动下架</p>
                  <p>
                    <img class="icon" src="../../../img/icon1/menu_二维码.png">
                    <img style="margin-left:10px;" class="icon" src="../../../img/icon1/menu_关闭.png">
                    <span class="text-icon">预约</span>
                  </p>
                </span>
              </li>
          </ul>
         </el-tab-pane>
         <el-tab-pane label="仓库中" name="second">仓库中</el-tab-pane>
       </el-tabs>
    </el-row> -->
  </div>
</template>

<script>
export default {
  data(){
    return {
      options: [{
         value: '选项1',
         label: '黄金糕'
       }, {
         value: '选项2',
         label: '双皮奶'
       }, {
         value: '选项3',
         label: '蚵仔煎'
       }, {
         value: '选项4',
         label: '龙须面'
       }, {
         value: '选项5',
         label: '北京烤鸭'
       }],
      value:'',
      checked:false,
      activeName2: 'first'
    }
  },
  methods:{
    handleClick:()=>{

    }
  }
}
</script>

<style lang="Sass" scoped>
.cardBox{ margin: 20px 10px; background: #fff; padding: 20px 10px; box-sizing: border-box; border-radius: 10px;

  span{font-size: 13px; height: 30px; line-height: 30px;}
  .text-right{text-align: right;}
  .text-left{text-align: left;}
  .el-checkbox__inner{width: 15px; height: 15px; margin-top: 7px;}
  .el-checkbox__inner::after{ left: 4px; top:0px;}
  .btn{padding: 0 20px;}
  .box{width:95%; margin: 10px auto 0 auto;}
}
.listBox{width: 100%; background: #fff;

  .first{display: flex; height: 30px; line-height: 30px; text-align: left; padding: 0;

      span{display: inline-block; line-height: 30px;}
      .name{flex: 1;}
      .num{flex: 0 0 80px;}
      .allNum{flex: 0 0 80px;}
      .shangjia{flex: 0 0 80px;}
      .policy{flex: 0 0 80px;}
      .buy{flex: 0 0 80px;}
      .update{flex: 0 0 90px; }
      .operation{flex: 0 0 180px;}
  }
  li{display: flex; height: auto; text-align: left; padding: 5px 0;

    span{display: inline-block; box-sizing: border-box; line-height: 13px;}
    .name{flex: 1; height: auto;

      p{width: 80%; height: auto; line-height: 20px; }
      .price{color: red;}
    }
    .num{flex: 0 0 80px;}
    .allNum{flex: 0 0 80px;}
    .shangjia{flex: 0 0 80px;}
    .policy{flex: 0 0 80px;}
    .buy{flex: 0 0 80px;}
    .update{flex: 0 0 90px;

      p{margin: 0; height: 18px;}
    }
    .operation{flex: 0 0 180px;
      p{margin-bottom: 5px;}
    }
  }

}
</style>
